<script setup>
import { Check, Operation, Remove } from '@element-plus/icons-vue'
</script>

<template>
  <div>
    <el-table border stripe>
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column
        prop="projectName"
        label="项目名"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="classify"
        label="项目类别"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="times"
        label="申请时间"
        width="250px"
      ></el-table-column>
      <el-table-column prop="total" label="人数"></el-table-column>
      <el-table-column label="操作" width="400" align="center" fixed="right">
        <!-- eslint-disable-next-line -->
        <template #default="scope">
          <el-tooltip
            effect="dark"
            content="该请求已处理"
            placement="left-start"
          >
            <el-button type="primary"
              >详细信息<el-icon style="margin-left: 3px"><Operation /></el-icon
            ></el-button>
          </el-tooltip>
          <el-popconfirm
            width="180"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="您确认同意么？"
          >
            <template #reference>
              <el-button type="success"
                >同意 <el-icon style="margin-left: 3px"><check /></el-icon
              ></el-button>
            </template>
          </el-popconfirm>

          <el-popconfirm
            width="180"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="您确认拒绝么？"
          >
            <template #reference>
              <el-button type="danger"
                >拒绝 <el-icon style="margin-left: 3px"><Remove /></el-icon
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
        style="margin-left: 25%"
        :page-sizes="[3, 5, 10, 15]"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <el-dialog>
      <el-descriptions
        title="项目详细信息"
        direction="vertical"
        :column="3"
        border
      >
        <el-descriptions-item label="项目Id"></el-descriptions-item>
        <el-descriptions-item label="项目名称"></el-descriptions-item>
        <el-descriptions-item label="项目类别"></el-descriptions-item>
        <el-descriptions-item label="项目人数" :span="1" width="100px">
          <el-tag size="small"></el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="项目介绍" :span="2">
        </el-descriptions-item>
        <el-descriptions-item label="图片" style="height: 120px">
          <div style="width: 120px; margin: 0; float: left">
            <el-image
              style="height: 100px; width: 100px; float: left"
              :initial-index="0"
            />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<style scoped>
.headerBg {
  background: #eee !important;
}
</style>
